<template>
  <div style="width: 259px; height: 240px; overflow: hidden; background: var(--el-fill-color-dark); border-radius: 4px">
    <div class="product-vessel">
      <div class="product-list">
        <page-simulation-template-product
          v-for="(product, index) in templateProductListCpt"
          :key="`${product.productTemplateId}_${product.productId}`"
          :productType="product.productType"
          style="width: 100%"
          :active="selectIndex === index"
          :productName="product.productName || ''"
          :productPrice="product.productPrice || ''"
          :marketingDesc="product.marketingDesc || ''"
          unit="元"
          :recommendTags="product.recommendTags || ''"
        ></page-simulation-template-product>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { type PropType, computed } from 'vue';
  import PageSimulationTemplateProduct from './page-simulation-template-product.vue';
  import type { MarketingProduct } from '@/api/marketing-management';

  defineOptions({
    name: 'page-simulation-template',
  });

  const props = defineProps({
    /** 模板中的商品列表 */
    templateProductList: { type: [Array] as PropType<MarketingProduct[]>, required: true },
    /** 默认选中的下标 */
    selectIndex: { type: Number, required: true },
  });

  const templateProductListCpt = computed(() => {
    return props.templateProductList?.filter((product: MarketingProduct) => product.showStatus === 1);
  });
</script>

<style lang="scss" scoped>
  .product-vessel {
    transform: scale(0.7);
    transform-origin: left top;

    .product-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 15px;
      justify-content: space-between;
      justify-items: center;
      width: 370px;
      min-height: 270px;
      padding: 13px;
    }
  }
</style>
